<template>
  <div id="home">
    <!--左边导航栏-->
    <div id="navigation">

      <!--用户信息区-->
      <div id="userInfo">
        <el-avatar :size="130" @error="errorHandler" style="margin: 15px calc(50% - 65px)">
          <img :src="image" alt="无法获取"/>
        </el-avatar>
        <span style="margin: 0px calc(50% - 65px);color: white">用户：<input v-model="username" disabled class="usernameText"></input></span>
      </div>

      <!--菜单栏-->
      <div id="navMenu">
      <el-row class="tac">
        <!--给default-active配置$route.path去获取当前路由路径，达到页面与导航栏选项一致-->
          <el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#172A4F"
            text-color="snow"
            active-text-color="snow"
          style="border: 0">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-document" style="color: snow"></i>
                <span>文章管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/articleList">文章列表</el-menu-item>
                <el-menu-item index="/articlePublish">发表文章</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/usersManage">
              <i class="el-icon-user" style="color: snow"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/classManage">
              <i class="el-icon-menu" style="color: snow"></i>
              <span slot="title">栏目管理</span>
            </el-menu-item>
            <el-menu-item index="/dataStatistics">
              <i class="el-icon-s-data" style="color: snow"></i>
              <span slot="title">数据统计</span>
            </el-menu-item>
          </el-menu>
      </el-row>
    </div>

    </div>

    <!--顶部导航栏-->
    <div id="topInfo">
      <h2 class="title">V部落博客管理平台</h2>
      <span></span>
      <div class="exitArea">
        <a class="exitLink" @click="showExit">注销<i :class="icon" style="color: #303133"></i></a>
        <div :style="exitDisplay" class="exitBoard"><a href="/login" @click="out" style="text-decoration: none;margin-left: 10px;">
          安全退出<i class="el-icon-switch-button"></i></a></div>
      </div>
    </div>

    <!--面包屑-->
    <div id="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(item,i) in breadList" :key="i" :to="{ path: item.path }">
          {{item.meta.title}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--主要内容显示区-->
    <div id="mainFrame">
      <router-view/>
    </div>

  </div>
</template>

<script>
    export default {
        name: "Home",
      data(){
          return{
            icon:"el-icon-arrow-down",
            exitDisplay:'display:none',
            breadList:[],//路由集合
            username:'哈哈哈哈哈哈哈哈',
            image:'',
          };
      },

      methods:{

        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        handleChange(val) {
          console.log(val);
        },
        showExit(){
          this.icon = this.icon === 'el-icon-arrow-down' ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
          this.exitDisplay = this.exitDisplay === 'display:none' ? 'display:' : 'display:none';
        },
        out(){
          this.$store.commit('logout');
          console.log("注销")
        },
        isHome(route) {
          return route.name === "home";
        },
        getBreadcrumb() {
          let matched = this.$route.matched;
          //如果不是首页
          // if (!this.isHome(matched[0])) {
          //    matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
          // }
          this.breadList = matched;
        },
        errorHandler() {
          return true
        }
      },
      created() {
        this.getBreadcrumb();
        const _this = this
        this.axios({
          method:'post',
          url:"http://localhost:8081/getManager",//填写url地址
          params:{'username':_this.$store.state.result.info}
        }).then(function (resp) {
          _this.username=resp.data.username;
          _this.image=resp.data.image;
        })
      },
      mounted(){
      },
      watch: {
        $route() {
          this.getBreadcrumb();
        }
      },
    }
</script>

<style>
  #home{
    /*min-height: 700px;*/
    /*#f9f9f9*/
    height: 100%;
    width: 100%;
    position: absolute;
  }

  #navigation{
    position: fixed;
    left: 0;
    height: 100%;
    /*min-height: 700px;*/
    width: 200px;
    background-color: #172A4F;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
  }

  #userInfo{
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #172A4F;
  }

  .usernameText{
    width: 70px;
    background-color: transparent;
    border: 0;
    color: white;
    font-size: 14px;
  }

  #navMenu{
    position: absolute;
    left: 0;
    width: 100%;
    top:200px;
  }

  #navMenu .el-submenu__icon-arrow.el-icon-arrow-down{
    color: snow;
  }

  #navMenu .el-menu-item.is-active{
    background-color:#11A768!important;
  }

  #topInfo{
    background-color: #E3E8EF;
    position: fixed;
    top:0;
    left: 200px;
    height: 50px;
    /*calc()计算函数，可以用来计算百分比和像素的加减  */
    width: calc(100% - 202px);
    /*min-width: 1300px;*/
    /*使用flex布局和align-items实现子元素垂直居中*/
    /*align-items: center;*/
    display: flex;
    border: 1px solid silver;
    z-index: 1;
    justify-content: space-between;
  }

  .title{
    color: #303133;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
    margin-left: 10px;
    line-height: 50px;
  }

  .exitLink{
    cursor: pointer;
    color: #303133;
    margin: 0px 26px;
  }

  .exitArea{
    /*position: absolute;*/
    margin: 0;
    line-height: 50px;
    width: 120px;
  }

  .exitBoard{
    background-color: white;
    border: 1px solid silver;
    border-top:0;
    width:100px;
    height: 48px;
    margin-top: 1px;
    background-color: #E3E8EF;
  }

  /*.el-icon-switch-button{*/
    /*color: #303133;*/
    /*font-size: 10px;*/
    /*font-weight: bold;*/
    /*!*margin-left: 9px ;*!*/
    /*!*margin-top: 9px;*!*/
  /*}*/

  .exitBoard:hover{
    background-color: #A7EBFC;
  }

  #crumbs{
    position: fixed;
    left: 200px;
    top:50px;
    padding: 15px;
  }

  #crumbs .el-breadcrumb{
    font-size: 15px;
  }

  #mainFrame{
    position: relative;
    left: 200px;
    top:100px;
    width: calc(100% - 232px);
    min-width: 1300px;
    height: 600px;

    margin: 0px 15px;
    background-color: white;
    z-index: 0;
  }


</style>
